<template>
    <DIV>
        <H2>ABOUT</H2>
    </DIV>
    <Bar :data="chartData" :options="chartOptions" />
    <div> <t-button @click="updateData">updateData</t-button>
    </div>

</template>

<script setup>

import { ref } from 'vue'
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

const chartData = ref({
    labels: ['January', 'February', 'March'],
    datasets: [{ data: [40, 20, 12] }]
})

const chartOptions = ref({
    responsive: true
})

const updateData = () => {
    console.log(updateData)
    let a1 = Math.random() * 100
    let a2 = Math.random() * 100
    let a3 = Math.random() * 100

    chartData.value = {
        labels: ['January', 'February', 'March'],
        datasets: [{ data: [a1, a2, a3] }]
    }

    chartOptions.value = {
        responsive: true
    }
}

</script>